import React from 'react';
import {View, StyleSheet} from 'react-native';
import SwiperItem from './SwiperItem';
import styles from './styles';
import Swiper from 'react-native-swiper';

const IndexSwiper = (props) => {

    const {swiperData, navigation} = props; 
    const swiperHeight = styles.swiperSize.height;
    return (
        <View
            height={swiperHeight}
        >
            <Swiper
                key={swiperData.length}
                height={swiperHeight}
                autoplay={true}
                loop={true}
                activeDotColor={'#fff'}
                paginationStyle={styles.pagination}
            >
                {
                    swiperData.map((item, index) => {
                        return (
                            <SwiperItem 
                                data={item}
                                key={index}
                                navigation={navigation}
                                styles={styles}
                            />
                        );
                    })
                }
            </Swiper>
        </View>
    );
}

export default IndexSwiper;
